<template>
  <div class="container">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未读消息" name="unread">
        <DataView
          ref="unreadDV"
          propViewKey="v_msg_inner_inbox"
          propViewForm="frame/msg/inner-inbox/detail.vue"
          :propPreQueryWrapper="$newWrapper().eq('isRead', 0).eq('contentType', 'news')"
          @after-load="handleUnreadDvAfterLoad"
          @extra-button-click="handleExtraButtonClick"
        />
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="read"  >
        <DataView
          v-if="readShow"
          ref="readDV"
          propViewKey="v_msg_inner_inbox"
          propViewForm="frame/msg/inner-inbox/detail.vue"
          :propPreQueryWrapper="$newWrapper().eq('isRead', 1).eq('contentType', 'news')"
          @after-load="handleReadDvAfterLoad"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DataView from '@/components/DataView.vue'

export default {
  name: 'InnerInbox',
  data() {
    return {
      activeName: 'unread',
      readShow: false
    }
  },
  components: {
    DataView
  },
  methods: {
    handleExtraButtonClick(extra) {
      let { button: { key } } = extra
      if (key === 'vrb-read-all') {
        if (!this.$refs.unreadDV.tablePage.totalResult) {
          this.utilMessage.warning('当前已无待处理的消息')
          return
        }
        this.$ajax.put('/msg/inner_inbox/read_all').then(resp => {
          this.utilMessage.success(resp.msg)
          this.$refs.unreadDV.fetchData()
        })
      }
    },
    handleUnreadDvAfterLoad(rows) {
      this.$refs.unreadDV.columns.forEach(o => {
        if (['isRead', 'gmtRead'].includes(o.name)) {
          this.$set(o, 'hidden', true)
        }
      })
    },
    handleReadDvAfterLoad(rows) {
      this.$refs.readDV.columns.forEach(o => {
        if (['isRead'].includes(o.name)) {
          this.$set(o, 'hidden', true)
        }
      })
      this.$refs.readDV.viewButtons.forEach(o => {
        if (['vrb-read-all'].includes(o.key)) {
          // 隐藏扩展按钮
          this.$set(o, 'hidden', true)
        }
      })
      this.$refs.readDV.rowButtons.forEach(o => {
        this.$set(o, 'hidden', true)
      })
    },
    handleClick(tab, event) {
      //readDV
      if (this.activeName == 'read') {
        this.readShow = true
      } else {
        this.readShow = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }
</style>
